import React from 'react';
import { SearchFilterProps } from './types';

const SearchFilter: React.FC<SearchFilterProps> = ({
  filterOptions,
  setFilterOptions,
  searchQuery,
  setSearchQuery,
  viewMode,
  setViewMode,
  selectedIds,
  onDeleteSelected
}) => {
  const handleStatusChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    setFilterOptions({
      ...filterOptions,
      status: e.target.value as any
    });
  };

  const handleDateRangeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    setFilterOptions({
      ...filterOptions,
      dateRange: e.target.value as any
    });
  };

  const handleSortOrderChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    setFilterOptions({
      ...filterOptions,
      sortOrder: e.target.value as any
    });
  };

  return (
    <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-4 mb-6">
      <h2 className="text-xl font-semibold mb-4 text-gray-900 dark:text-white">搜索 & 筛选</h2>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
        {/* 搜索框 */}
        <div className="relative">
          <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
            <svg className="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
              <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
            </svg>
          </div>
          <input
            type="search"
            className="block w-full p-2.5 pl-10 text-sm text-gray-900 dark:text-white border border-gray-300 dark:border-gray-700 rounded-lg bg-gray-50 dark:bg-gray-700 focus:ring-blue-500 focus:border-blue-500"
            placeholder="搜索历史..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
          />
        </div>

        {/* 状态筛选 */}
        <div>
          <div className="flex items-center">
            <svg className="w-4 h-4 text-gray-500 dark:text-gray-400 mr-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
              <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M7 10h12M7 5h12M7 15h12M3 10a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm0-5a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm0 10a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
            </svg>
            <select
              className="bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-700 text-gray-900 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
              value={filterOptions.status}
              onChange={handleStatusChange}
            >
              <option value="all">全部状态</option>
              <option value="success">成功</option>
              <option value="error">错误</option>
              <option value="pending">待处理</option>
            </select>
          </div>
        </div>

        {/* 日期筛选 */}
        <div>
          <div className="flex items-center">
            <svg className="w-4 h-4 text-gray-500 dark:text-gray-400 mr-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
              <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 1v3m5-3v3m5-3v3M1 7h18M5 11h2m2 0h2m2 0h2M5 15h2m2 0h2m2 0h2M1 19h18V5H1v14Z"/>
            </svg>
            <select
              className="bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-700 text-gray-900 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
              value={filterOptions.dateRange}
              onChange={handleDateRangeChange}
            >
              <option value="all">全部时间</option>
              <option value="today">今天</option>
              <option value="this-week">本周</option>
              <option value="this-month">本月</option>
            </select>
          </div>
        </div>

        {/* 排序 */}
        <div>
          <div className="flex items-center">
            <svg className="w-4 h-4 text-gray-500 dark:text-gray-400 mr-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
              <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 14v-4m-4 0 4-4 4 4m-9 4h10M5 3h10"/>
            </svg>
            <select
              className="bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-700 text-gray-900 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
              value={filterOptions.sortOrder}
              onChange={handleSortOrderChange}
            >
              <option value="newest">最新优先</option>
              <option value="oldest">最早优先</option>
            </select>
          </div>
        </div>

        {/* 视图切换 */}
        <div className="flex items-center justify-end">
          <div className="flex p-1 bg-gray-100 dark:bg-gray-700 rounded-lg">
            <button
              type="button"
              className={`p-2 rounded-md ${viewMode === 'table' ? 'bg-white dark:bg-gray-600 shadow' : ''}`}
              onClick={() => setViewMode('table')}
              aria-label="表格视图"
            >
              <svg className="w-5 h-5 text-gray-500 dark:text-gray-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M1 5h18M1 10h18M1 15h18"/>
              </svg>
            </button>
            <button
              type="button"
              className={`p-2 rounded-md ${viewMode === 'cards' ? 'bg-white dark:bg-gray-600 shadow' : ''}`}
              onClick={() => setViewMode('cards')}
              aria-label="卡片视图"
            >
              <svg className="w-5 h-5 text-gray-500 dark:text-gray-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 4h2.5m3 0h2.5m3 0H17m0 0v2.5m0 3v2.5m0 3V15m0 0h-2.5m-3 0H9m-3 0H3m0 0v-2.5m0-3V7m0-3V1m0 0h2.5m3 0h2.5m3 0H17"/>
              </svg>
            </button>
          </div>
        </div>
      </div>

      {/* 批量操作区域 */}
      {selectedIds.length > 0 && (
        <div className="mt-4 flex items-center justify-between bg-gray-50 dark:bg-gray-700 p-2 rounded-lg">
          <span className="text-sm font-medium text-gray-700 dark:text-gray-300">已选择 {selectedIds.length} 条记录</span>
          <button
            type="button"
            className="text-white bg-red-600 hover:bg-red-700 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2 focus:outline-none"
            onClick={onDeleteSelected}
          >
            删除选中项
          </button>
        </div>
      )}
    </div>
  );
};

export default SearchFilter; 